<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item prop="keyWord" label="关键词:">
        <el-input
            v-model="queryParams.keyWord"
            placeholder="关键词"
            clearable
            @keyup.enter.native="handleQuery"
            suffix-icon="search"
            :suffix-icon-click="handleQuery"
        />
      </el-form-item>


      <el-form-item prop="matterResponsibleId" label="负责人:">
        <el-select v-model="queryParams.matterResponsibleId" placeholder="请选择"
                   clearable style="width: 180px" @focus="fetchRelatedPolicies">
          <el-option v-for="item in user"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="isTimeOut" label="是否超期:">
        <el-select v-model="queryParams.isTimeOut" placeholder="请选择" clearable style="width: 180px">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="isKeyWork" label="是否重要工作:">
        <el-select v-model="queryParams.isKeyWork" placeholder="请选择" clearable style="width: 180px">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="em1" label="状态:">
        <el-select v-model="queryParams.em1" placeholder="请选择" clearable style="width: 180px">
          <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>


    <ElLine :title="'事项清单'"/>
    <el-table v-loading="loading" :data="matterList" @selection-change="handleSelectionChange">
      <el-table-column width="10px" type="selection" align="center"/>
      <el-table-column width="130px" label="事项名称" align="center" prop="matterName"/>

      <el-table-column width="80px" label="负责人" align="center" prop="matterResponsible"/>
      <el-table-column width="80px" label="协同人" align="center" prop="collaborators"/>
      <el-table-column width="100px" label="计划完成时间" align="center" prop="completionDeadline"/>

      <el-table-column label="是否是重要工作" align="center" prop="isKeyWork">
        <template #default="scope">
          <el-switch
              v-model="scope.row.isKeyWork"
              active-color="#13ce66"
              inactive-color="#cccccc"
              :active-value="0"
              :inactive-value="1"
              @change="handleSwitchChange2(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column width="100px" label="超期天数" align="center" prop="xxx"/>

      <el-table-column width="80px" label="状态" align="center">
        <template #default="scope">
        <span :style="{ color: getStatusColor(scope.row) }">
          {{ getStatusText(scope.row) }}
        </span>
        </template>
      </el-table-column>
      <el-table-column label="催办意见" align="center" prop="xxx"/>

      <el-table-column label="是否是重要工作" align="center" prop="isKeyWork">
        <template #default="scope">
          <el-switch
              v-model="scope.row.isKeyWork"
              active-color="#13ce66"
              inactive-color="#cccccc"
              :active-value="0"
              :inactive-value="1"
              @change="handleSwitchChange2(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>


      <el-table-column width="80px" label="关注" align="center" prop="xxx">
        <template #default="scope">
          <el-switch
              v-model="scope.row.xxx"
              class="ml-2"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              @change="handleSwitchChange(scope.row)"
          />
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button size="mini" type="success" plain @click="getInto(scope.row)">进入</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>
<!--事项催办-->
<script>
import {reactive, toRefs} from "vue";
import {getUsers} from "@/api/matter/users.js";
import {updteIsKeyWork} from "@/api/matter/matter.js";

export default {
  name: "urge",
  components: {},

  setup(_, {emit}) {
    // 定义初始状态常量
    const initialMatterInfo = {
      queryParams: {
        keyWord: '',
        matterResponsibleId: '',
        isTimeOut:'',
        isKeyWork: ''
      },
      user: [],// 存储用户选项
      options1: [
        {value: '', label: '全部'},
        {value: '0', label: '重要工作'},
        {value: '1', label: '非重要工作'},
      ],
      options2: [
        {value: '', label: '全部'},
        {value: '0', label: '超期'},
        {value: '1', label: '未超期'},
      ],
      options3: [
        {value: '', label: '全部'},
        {value: '0', label: '进行中'},
        {value: '1', label: '已完成'},
        {value: '2', label: '已终止'},
      ],

    };
    const data = reactive(
        initialMatterInfo
    )
    const handleQuery = () => {
      data.queryParams.pageNum = 1;

    };

    // 事项负责人
    const fetchRelatedPolicies = () => {
      return new Promise((resolve, reject) => {
        getUsers().then(response => {
          if (response.code === 200) {
            data.user = response.data;
            resolve(); // 成功获取数据后 resolve
          } else {
            proxy.$modal.msgError(result.msg);
            reject(new Error('Failed to fetch policies')); // 失败时 reject，并传递错误信息
          }
        }).catch(error => {
          console.error('Error fetching policies:', error);
          reject(error); // 捕获任何异常，并将其作为错误对象传递给 reject
        });
      });
    };
    // 是否是重要工作
    const handleSwitchChange2 = (row) => {
      // alert(row.isKeyWork)
      updteIsKeyWork({matterId: row.matterId, isKeyWork: row.isKeyWork}).then((response) => {
        row.isKeyWork = response.data.isKeyWork
      })
    };

    const getStatusText = (row) => {
      if (row.em1) {
        return row.em1;
      } else {
        const currentDate = new Date();
        const deadlineDate = new Date(row.completionDeadline);
        return currentDate > deadlineDate ? '超时' : '进行中';
      }
    };
    return {
      ...toRefs(data),
      handleQuery,
      fetchRelatedPolicies,
      handleSwitchChange2,
      getStatusText,
    }
  }
}
</script>

<style scoped>

</style>
